<template>
  <div class="main-page" style="min-width:1366px;">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchFilterList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
          >批量删除</el-button
        >

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
          >导出</el-button
        >
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="ReviewFilterList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column prop label="操作" show-overflow-tooltip width="110">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="dialogEditFilter(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>

          <el-table-column prop="drugNames" label="相关药品" show-overflow-tooltip width="350" />
          <el-table-column prop="slCode_txt" label="原审查级别" show-overflow-tooltip width="110" />
          <el-table-column prop="edit_slCode_txt" label="现审查级别" show-overflow-tooltip width="110" />
          <el-table-column prop="edit_warning" label="现审查描述" show-overflow-tooltip width="350" />

          <el-table-column prop="userName" label="配对人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.userName}}</template>
          </el-table-column>
          <el-table-column prop="userName" label="配对人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{getDate(scope.row.addDate)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="审查结果详情"
      :visible.sync="dialogVisible"
      width="45%"
      style="DialogCard"
      :before-close="handleClose"
    >
      <el-card class="dialogFilter">
        <el-form
          :inline="true"
          :model="FilterData"
          class="demo-form-inline"
          label-position="right"
          label-width="82px"
        >
          <div class="dialogForm">
            <el-form-item label="相关药品" class="drugForm">
              <el-input size="mini" v-model="FilterData.drugNames"></el-input>
            </el-form-item>
          </div>
          <div class="dialogForm">
            <el-form-item label="审查类型">
              <el-input size="mini" v-model="FilterData.type_txt"></el-input>
            </el-form-item>
          </div>
          <div class="dialogForm">
            <el-form-item label="原审查级别" class="drugForm">
              <el-input size="mini" v-model="FilterData.slCode_txt"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
      <!-- 说明书 -->
      <el-card style="margin-top:10px;">
        <el-form :inline="true" :model="FilterData" class="demo-form-inline">
          <el-form-item label="原审查简短描述" class="drugForm" style="margin-bottom:0px">
            <el-input size="mini" v-model="FilterData.warning"></el-input>
          </el-form-item>
          <el-form-item label="原审查详细描述">
            <el-input type="textarea" disabled v-html="FilterData.last_abstractDesc"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="dialogFilter" style="margin-top:10px;">
        <el-form :inline="true" :model="FilterData">
          <div>
            <el-form-item label="新设审查级别" class="drugForm" style="margin-bottom:0px">
              <el-radio-group v-model="FilterData.slCode">
                <el-radio :label="-1">忽略</el-radio>
                <el-radio :label="0">拦截</el-radio>
                <el-radio :label="1">禁忌</el-radio>
                <el-radio :label="2">不推荐</el-radio>
                <el-radio :label="3">轻微</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="新设审查简短描述" class="XinShenCha">
              <el-input type="textarea" v-model="FilterData.edit_warning"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="danger" @click="DeleteFilter">删除滤镜</el-button>
        <el-button size="mini" type="success" @click="SaveEditFilter">保存滤镜</el-button>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getReviewFilterList,
  getdate,
  getDialogFilter,
  SaveEditFilter,
  DeleteFilter
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  created: function() {
    this.getReviewFilterList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getReviewFilterList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      // console.log("handleCurrentChange")
      this.queryInfo.page = newPage;
      this.getReviewFilterList();
    },
    handleClose(done) {
      done();
    },
    async getReviewFilterList() {
      let _this = this;
      let res = await this.$rad.getReviewFilterList({
        drugKeyword: _this.queryInfo.drugKeyword,
        search_slCode: _this.queryInfo.search_slCode,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      this.ReviewFilterList = res.rows;
      this.total = res.total;
      console.log(res);
    },
    getSearchFilterList: function(data) {
      this.queryInfo.drugKeyword = data.drugKeyword;
      this.queryInfo.search_slCode = data.search_slCode;
      this.getReviewFilterList();
    },
    getDate(date) {
      return this.$rad.getdate(date);
    },
    dialogEditFilter(id) {
      this.dialogData.id = id;
      this.getDialogFilter();
      this.dialogVisible = true;
    },
    async getDialogFilter() {
      let res = await this.$rad.getDialogFilter({
        id: this.dialogData.id
      });

      this.FilterData.drugNames = res.drugNames;
      this.FilterData.type_txt = res.type_txt;

      this.FilterData.slCode_txt = res.slCode_txt;
      this.FilterData.warning = res.warning;
      this.FilterData.last_abstractDesc = res.last_abstractDesc;
      this.FilterData.slCode = res.slCode;
      this.FilterData.edit_warning = res.edit_warning;

      console.log(res);
    },
    async SaveEditFilter() {
      let res = await this.$rad.SaveEditFilter({
        id: this.dialogData.id,
        slCode: this.FilterData.slCode,
        warning: this.FilterData.edit_warning
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.dialogVisible = false;
        this.getReviewFilterList();
      } else {
        this.$message.error(res.msg);
      }
    },
    async DeleteFilter() {
      let res = await this.$rad.DeleteFilter({
        id: this.dialogData.id
      });
      if (res.code == 1) {
        this.$message.success(res.msg);
        this.dialogVisible = false;
        this.getReviewFilterList();
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        drugKeyword: "",
        search_slCode: "",
        // 当前的页数
        page: 1,
        // 当前页显示多少数据
        pageSize: 20
      },
      total: 0,
      ReviewFilterList: [],
      dialogVisible: false,
      dialogData: {
        id: ""
      },
      FilterData: {
        drugNames: "",
        type_txt: "",

        slCode_txt: "",
        warning: "",
        last_abstractDesc: "",
        slCode: "",
        edit_warning: ""
      }
    };
  }
};
</script>
<style scoped>
.main-page {
  font-size: 12px;
}
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
/* .exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
} */
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialogFilter >>> .el-card__body {
  padding: 0px 10px 0px 20px;
}
.dialogForm {
  height: 41px;
}
.drugForm {
  width: 100%;
}
.XinShenCha {
  width: 100%;
}
.XinShenCha >>> .el-form-item__content {
  width: 70%;
}
</style>
